import React, { useState } from 'react';
import {
  Form,
  Input,
  Button,
  Radio,
  Select,
  Cascader,
  DatePicker,
  InputNumber,
  TreeSelect,
  Switch,
} from 'antd';

export default function Newfrom() {
  const [componentSize, setComponentSize] = useState('default');
  const [value, setValue] = useState(true);

  const onFormLayoutChange = ({ size }) => {
    setComponentSize(size);
  };
  const onWeigh = (id) => {
    if (id === 1 & value === false || id === 0 & value === true) {
      
      setValue(!value);
    }
  }
  const onFinish = (values) => {
    console.log('Name:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        initialValues={{
          size: componentSize,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        onValuesChange={onFormLayoutChange}
        size={componentSize}>
        <Form.Item label="商品类型" >
          <Radio.Group defaultValue="1" >
            <Radio.Button value="1" onClick={() => onWeigh(1)}>称重</Radio.Button>
            <Radio.Button value="0" onClick={() => onWeigh(0)}>非称重</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="名称"
          name="name"
          rules={[{
            min: 1,
            max: 10,
            required: true,
            message: '请输入合法的名称!'
          }]} >
          <Input type="text" />
        </Form.Item>
        <Form.Item label="售卖价格"
          name="price"
          rules={[{
            min: 1,
            max: 99,
            required: true,
            message: '请输入正确的售卖价格!'
          }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="成本价格"
          name="cost"
          rules={[{
            min: 1,
            max: 99,
            required: true,
            message: '请输入正确的成本价格!'
          }, ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('price') > value) {
                return Promise.resolve();
              }

              return Promise.reject(new Error('成本价不能高于售卖价格'));
            },
          })]} >
          <Input />
        </Form.Item>
        {value && <Form.Item label="单位" name='unit'>
          <Select>
            <Select.Option value="1">克</Select.Option>
            <Select.Option value="2">份</Select.Option>
          </Select>
        </Form.Item>}
        <Form.Item label="多级规格" name='norm'>
          <TreeSelect
            treeData={[
              {
                label: '辣度',
                value: '0',
                children: [
                  {
                    label: '微辣',
                    value: '1',
                  },
                  {
                    label: '中辣',
                    value: '2',
                  }, {
                    label: '特辣',
                    value: '3',
                  }
                ],
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="生产地" name='address'>
          <Cascader
            options={[
              {
                value: 'sichuan',
                label: 'Sichuan',
                children: [
                  {
                    value: 'chengdu',
                    label: 'Chengdu',
                  },
                ],
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="生产日期" name='date'>
          <DatePicker />
        </Form.Item>
        <Form.Item label="打包个数" name='number'>
          <InputNumber />
        </Form.Item>
        <Form.Item label="参与优惠" valuePropName="checked" name='discount'>
          <Switch />
        </Form.Item>
        <Form.Item label="提交信息">
          <Button type="primary" htmlType="submit">提交信息</Button>
        </Form.Item>
      </Form>
    </div >
  )
}
